<template>
    <div class="recommendmusic" v-if="recommendMusic[0]"  :style="{ padding: recommendMusic[0].picUrl? '0.2rem 0.1rem':'0rem 0.1rem'}">
        <div class="tophead">
            <slot name="left">
                <!-- <span class="tit">推荐歌单</span> -->
            </slot>
            <slot name="right">
                <!-- <span class="rig">更多</span> -->
            </slot>
        </div>
        
        <div :class="['sw', recommendMusic[0].picUrl ? 'stopwrap' : 'openwrap' ]">
            <div v-for="item in recommendMusic" :key="item.id" class="switem"  @click="goSongDetail(item.id)"
                :style="{ marginBottom: recommendMusic[0].picUrl? '0rem':'0.1rem'}"
            >
              <img v-if="item.picUrl" :src="item.picUrl" alt="">
              <img v-else :src="item.coverImgUrl" alt="">
              <div class="titname">
                {{item.name}}
              </div>
              <span >{{ item.playCount }} </span>
            </div>
        </div>
    </div>
</template>

<script>


export default {
    name: "recommendmusic",
    props:['recommendMusic'],
    methods: {
        goSongDetail(id){
            this.$router.push({
                name:'SongDetail',
                params:{
                    songId: id
                }
            })
        },
    }
   
};
</script>

<style scoped lang="scss">
.sw::-webkit-scrollbar {
    display: none;
}
.recommendmusic {
    padding: 0.2rem 0.1rem;
    .tophead {
        display: flex;
        justify-content: space-between;
    }
    .tit {
        font-size: 0.2rem;
        font-weight: bold;
    }
    .rig {
        padding: 0.03rem 0.1rem;
        border: 1px solid #ececec;
        border-radius: 30%;
    }
    // 禁止换行
    .stopwrap{
        overflow: hidden;
        overflow-x: scroll;
    }
    // 打开换行
    .openwrap{
        flex-wrap: wrap;
        justify-content: space-between;
        .switem:nth-child(3n+3){
            margin-right: 0rem;
        }
    }
    .openwrap::after{
        content: '';
        width: 1.08rem;
    }
    .sw {
        margin: 0.15rem 0rem;
        display: flex;
        .switem{
            margin-right: .1rem;
            position: relative;
            width: 1.08rem;
            .titname{
                // 超出默认隐藏
                display: -webkit-box;
                text-overflow: ellipsis;
                overflow: hidden;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;//当属性值为3，表示超出3行隐藏
            }
            img{
              width: 1.08rem;
              border-radius: 10px;
            }
            span{
                padding: 0.03rem .1rem;
                background-color: rgba(1,1 ,1 , .3);
                border-radius: 30%;
                position: absolute;
                top: .05rem;
                right: .1rem;
                color: #fff;
             
            }
        }
    }
}
</style>
